<template>
  <a-modal
    :title="title"
    v-model="visible"
    width="1325px"
    :dialog-style="{ top: '70px' }"
    wrapClassName="modal-add"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <div class="content">
      <TopicBasicInfo ref="basicInfo" v-show="activeIndex === 1" />
      <TopicTableInfo ref="tableInfo" v-show="activeIndex === 2" />
    </div>
    <template slot="footer">
      <a-button v-show="activeIndex === 1" @click="handleNext" :loading="nextLoading">下一步</a-button>
      <a-button v-show="activeIndex === 2" @click="handlePrevious">上一步</a-button>
      <a-button v-show="activeIndex === 2" type="primary" :loading="loading" @click="handleOk">完成</a-button>
    </template>
  </a-modal>
</template>

<script>

import { getAction, postAction } from '@/api/manage'
import TopicBasicInfo from './TopicBasicInfo'
import TopicTableInfo from './TopicTableInfo'

export default {
  name: 'ScSituationIndexTopicAddModal',
  components: {
    TopicBasicInfo,
    TopicTableInfo
  },
  props: {
    modalVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新增',
      activeIndex: 1,
      visible: this.modalVisible,
      loading: false,
      nextLoading: false,
      url: {
        add: '/topic/config/addTopic',
        tableList: '/index/config/getTableColumns',
        queryById: '/index/scSituationIndexTopic/queryById'
      },
      firstObj: {}
    }
  },
  computed: {},
  created() { },
  methods: {
    /**
     * @description 下一步
     * @returns void
     */
    handleNext() {
      // 校验数据的合法性，同时调用接口查询数据
      const obj = this.$refs.basicInfo.handleDataRight()
      if (obj.nextFlag) {
        this.nextLoading = true
        this.firstObj = obj.basicInfo
        getAction(this.url.tableList, {
          indexList: obj.indexList.toString(),
          dimensionList: obj.dimensionList.toString()
        }).then((res) => {
          if (res.code === 200) {
            this.activeIndex++
            this.$refs.tableInfo.handleTableData(res.result)
          } else {
            this.$message.warning(res.message)
          }
          this.nextLoading = false
        }).catch(() => {
          this.nextLoading = false
        })
      }
    },

    /**
    * @description 上一步
    * @returns void
    */
    handlePrevious() {
      this.activeIndex--
    },

    /**
     * @description 关闭操作
     * @returns void
     */
    handleCancel() {
      this.visible = false
      this.$emit('close', false)
    },

    /**
     * @description  确定添加
     * @returns void
     */
    handleOk() {
      // 进行数据库的封装，并调用接口进行数据的保存
      const obj = this.$refs.tableInfo.handleTableDataRight()
      if (obj.nextFlag) {
        const tempObj = {
          topicName: this.firstObj.topicName,
          topicDesc: this.firstObj.topicDesc,
          status: this.firstObj.status,
          serviceCode: this.firstObj.serviceCode,
          topicTable: this.firstObj.topicTable,
          topicCols: obj.topicCols,
          topicType: this.firstObj.topicType != null && this.firstObj.topicType.length > 0 ? this.firstObj.topicType.join(',') : null
        }
        this.loading = true
        postAction(this.url.add, tempObj).then((res) => {
          if (res.code === 200) {
            this.$message.success('添加指标建模数据成功！')
            this.visible = false
            this.$emit('close', true)
          } else {
            this.$message.warning(res.message)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

<style lang="less">
.content {
  width: 100%;
  height: 690px;
}
.modal-add {
  .ant-modal-body {
    padding: 0;
  }
}
</style>

